<template>
  <div>
    <!-- v-bind:属性名 -->
    <a v-bind:href="url">跳转到百度</a>
    <!-- 简写 v-bind:属性名 ==> :属性名 -->
    <!-- <img :src="imgSrc" alt="" /> -->

    <!-- v-on:事件名 -->
    <h1>{{ msg }}</h1>
    <button @click="btnClick">翻转</button>
    <button v-on:click="num += 1">+1</button>
    <button v-on:click="addFn">+1</button>
    <button v-on:click="addNumFn(5, $event)">+5</button>
    <!-- v-on 简化 @ -->
    <button @click="jian()">-1</button>

    <!-- 阻止默认行为 e.preventDefault() -->

    <!-- 
      修饰符 在事件名后 .stop .prevent .once 
      .stop 阻止事件冒泡
      .prevent 阻止默认行为
      .once 只执行一次

      可以连着写
      .stop.prevent  阻止事件冒泡 同时也 阻止默认行为
      特殊！！！
      .once.prevent 只执行一次的同时也阻止默认行为 但点击第二次是，阻止默认行为失效
    -->

    <!-- 
      键盘修饰符
      例：
      @keydown.enter="我被触发了" 只有按下键盘中的 enter 键才会被触发这个键盘事件函数
      @keydown.esc="我被触发了"   只有按下键盘中的 esc 键才会被触发这个键盘事件函数
    -->
    <hr />
    <input type="text" @keydown.enter="enter" />
    <br />
    <input type="text" @keydown.esc="esc" />
  </div>
</template>

<script>
// import imgSrc from "./assets/logo.png";
export default {
  data() {
    return {
      url: "http://www.baidu.com",
      // imgSrc,
      msg: "Hello,Word",
    };
  },
  methods: {
    addFn(e) {
      // e.preventDdfault();
      this.num++;
    },
    addNumFn(num1, e, num2) {
      e.preventDdfault();
      this.num += num1;
    },
    jian() {
      this.num--;
    },
    enter() {
      console.log("我被触发了enter");
    },
    esc() {
      console.log("我被触发了");
    },
    btnClick() {
      this.msg = this.msg.split("").reverse().join("");
    },
  },
};
</script>

<style>
</style>